<template>
	<view class="store-list p-b-50" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'">
		<view class="list-box p-t-30" v-if="!isEmpty">
			<view class="m-b-30 m-lr-30 p-30 br-10 bc-w" v-for="item in storeList" :key="item.id">
				<xy-store-row :item="item" :first="first" :text="item.id == storeId ? '当前场馆' :'选择场馆'" />
			</view>
		</view>
		
		<view v-if="!isLoading && isEmpty">
			<view class="no-data">
				<xy-empty text="请先在后台添加场馆" />
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import xyStoreRow from '@/components/xy-store/row';
	import xyEmpty from '@/components/xy-empty';
	export default {
		components: {
			xyStoreRow,
			xyEmpty
		},
		data() {
			return {
				css:{},
				lat: 0,
				lng: 0,
				search:'',
				isEmpty: true,
				isLoading:true,
				category_id:0,
				storeId:1,
				storeList: [],
				currentPage: 1,
				lastPage: 1,
				loadStatus: 'loadmore',
				first:false,
			}
		},
		computed: {
			...mapState(['common'])
		},
		onLoad(options) {
			
			if(options && options.first){
				this.first = true;
			}
			
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			var store = uni.getStorageSync("xyvenue:store");
			
			if(store){
				this.storeId = store.id;
			}
			
			this.$xyfun.loc().then((res)=>{
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			},()=>{
				this.loadData();
			})
		},
		onPullDownRefresh() {
			this.currentPage = 1;
			this.storeList = [];
			this.loadData();
		},
		onReachBottom() {
			if(this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.loadData();
			}
		},
		methods: {
			loadData(){
				this.$api.get({
					url: '/store/lists',
					loadingTip:'加载中...',
					data: {
						lat: this.lat,
						lng: this.lng,
						search:this.search,
						category_id:this.category_id,
						page: this.currentPage,
					},
					success: res => {
						uni.stopPullDownRefresh();
						var tempStore = res.data;
						tempStore.forEach((item,index)=>{
							tempStore[index]['distance'] = this.$xyfun.algorithm([item.latitude,item.longitude],[this.lat,this.lng]);
						});
						this.storeList = [...this.storeList, ...tempStore];
						this.isEmpty = !this.storeList.length;
						this.isLoading = false;
						this.currentPage = res.current_page; 
						this.lastPage = res.last_page;
						this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
						
					}
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.no-data{padding-top: 300rpx;}
</style>
